<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>

    <a-card :bordered="false">
      <a-form :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 14 }" @submit="handleSubmit">
        <!-- <a-form-item label="默认支付方式">
          <a-radio-group v-decorator="['adopt_pay_type']" @change="onChange">
            <a-radio value="0"> 线上支付 </a-radio>
            <a-radio value="1"> 线下支付 </a-radio>
          </a-radio-group>
        </a-form-item> -->
        <!-- <a-form-item class="pay-checkbox" v-show="showPay" label="支付设置"> -->
        <a-form-item class="pay-checkbox" label="支付设置">
          <a-checkbox-group v-decorator="['payType', { initialValue: payList }]">
            <a-row>
              <a-col class="pay-col" v-for="(item, index) in payOptions" :span="24" :key="index">
                <a-checkbox :value="item.value">
                  <a-row style="width: 410px; display: flex; align-items: center">
                    <span>{{ item.default }}</span>
                    <span class="label-self" :class="index > 0 ? 'add-padding' : ''">自定义名称：</span>
                    <a-input style="width: 200px" v-model="item.name" />
                  </a-row>
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item class="pay-checkbox" label="萤石AppKey">
          <a-input
            class="search-input"
            v-model="settingInfo.ys_app_key"
            allowClear
            placeholder="请输入萤石AppKey"
          ></a-input>
        </a-form-item>
        <a-form-item class="pay-checkbox" label="萤石Secret">
          <a-input
            class="search-input"
            v-model="settingInfo.ys_secret"
            allowClear
            placeholder="请输入萤石Secret"
          ></a-input>
        </a-form-item>
        <a-form-item label="认养协议">
          <a-select style="width: 300px" v-model="agreement_id">
            <a-select-option v-for="article in articleList" :key="article.id" :value="article.id - 0">
              {{ article.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="成熟超时时间" hasFeedback>
          <a-input
            style="width: 468px"
            type="number"
            :step="1"
            suffix="天"
            placeholder="请填成熟超时时间"
            v-model="mature_overtime"
          />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="成熟超时提示时间" hasFeedback>
          <a-input
            style="width: 468px"
            type="number"
            :step="1"
            suffix="天"
            placeholder="请填成熟超时提示时间"
            v-model="mature_overtime_tips"
          />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="入库超时时间" hasFeedback>
          <a-input
            style="width: 468px"
            type="number"
            :step="1"
            suffix="天"
            placeholder="请填入库超时时间"
            v-model="storage_overtime"
          />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="入库超时提示时间" hasFeedback>
          <a-input
            style="width: 468px"
            type="number"
            :step="1"
            suffix="天"
            placeholder="请填入库超时提示时间"
            v-model="storage_overtime_tips"
          />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="免费保管时间" hasFeedback>
          <a-input
            style="width: 468px"
            type="number"
            :step="1"
            suffix="天"
            placeholder="请填免费保管时间"
            v-model="free_preserve_time"
          />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="免费保管提示时间" hasFeedback>
          <a-input
            style="width: 468px"
            type="number"
            :step="1"
            suffix="天"
            placeholder="请填免费保管提示时间"
            v-model="free_preserve_time_tips"
          />
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit"> 保存 </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import pick from 'lodash.pick'
import { getAdoptSetting, saveAdoptSetting } from '@/api/adopt/setting'
import { getAboutArticle } from '@/api/content'

export default {
  name: '',
  components: {},
  data() {
    return {
      activeTab: '3',
      tabs: [
        {
          value: '0',
          text: '认养列表',
          path: 'AdoptList',
        },
        {
          value: '1',
          text: '认养分类',
          path: 'AdoptCat',
        },
        {
          value: '2',
          text: '认养订单',
          path: 'AdoptOrderList',
        },
        {
          value: '3',
          text: '认养设置',
          path: 'AdoptSetting',
        },
        {
          value: '4',
          text: '设备管理',
          path: 'DeviceList',
        },
        {
          value: '5',
          text: '配送订单',
          path: 'CostOrderList',
        },
      ],
      form: this.$form.createForm(this),
      imgSrc: '',
      settingInfo: {},
      showPay: false,
      payOptions: [],
      payList: [],
      articleList: [],
      agreement_id: '',
      mature_overtime: 0,
      storage_overtime: 0,
      free_preserve_time: 0,
      mature_overtime_tips: 0,
      storage_overtime_tips: 0,
      free_preserve_time_tips: 0,
    }
  },
  watch: {},
  created() {
    this.article()
  },
  mounted() {
    this.getSetting()
  },
  computed: {},
  filters: {},
  methods: {
    article() {
      var that = this
      return getAboutArticle({ is_have_page: 0 }).then((res) => {
        if (res.code == 0) {
          that.articleList = res.data
        }
      })
    },
    getSetting() {
      getAdoptSetting().then((res) => {
        console.log(res)
        if (!res.code) {
          this.settingInfo = res.data
          this.agreement_id = res.data.agreement_id
          this.mature_overtime = res.data.mature_overtime
          this.storage_overtime = res.data.storage_overtime
          this.free_preserve_time = res.data.free_preserve_time
          this.mature_overtime_tips = res.data.mature_overtime_tips
          this.storage_overtime_tips = res.data.storage_overtime_tips
          this.free_preserve_time_tips = res.data.free_preserve_time_tips
          this.showPay = this.settingInfo.adopt_pay_type == 0
          this.payOptions = JSON.parse(JSON.stringify(this.settingInfo.adopt_payment))
          this.payOptions.forEach((d) => {
            if (d.value == 1) {
              this.payList.push(d.key)
            }
          })

          this.payOptions.forEach((d) => {
            if (d.key == 'alipay') {
              d['default'] = '支付宝支付'
              d['value'] = 'alipay'
              d['payment'] = '4'
            }
            if (d.key == 'wechat') {
              d['default'] = '微信支付'
              d['value'] = 'wechat'
              d['payment'] = '1'
            }
            if (d.key == 'huodao') {
              d['default'] = '货到付款'
              d['value'] = 'huodao'
              d['payment'] = '2'
            }
            if (d.key == 'friend') {
              d['default'] = '朋友代付'
              d['value'] = 'friend'
              d['payment'] = '6'
            }
          })
          this.$nextTick(() => {
            this.form.setFieldsValue({
              adopt_pay_type: String(this.settingInfo.adopt_pay_type),
            })
          })
        }
      })
    },
    onChange(e) {
      this.$nextTick(() => {
        console.log('form:{}', this.form.getFieldValue('adopt_pay_type'))
        if (this.form.getFieldValue('adopt_pay_type') == 0) {
          this.showPay = true
        } else {
          this.showPay = false
        }
      })
    },
    // tab切换
    tabChange(e) {
      console.log(e)
      console.log(this.tabs[e])
      if (e == 3) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          console.log(this.payOptions)
          console.log(this.payList)
          let arr = this.settingInfo.adopt_payment
          arr.forEach((d, index) => {
            d.value = 0
            if (values.payType.includes(d.key)) {
              d.value = 1
            }
            d.name = this.payOptions[index].name
          })
          console.log(arr)
          let obj = {
            adopt_pay_type: values.adopt_pay_type,
            adopt_payment: JSON.stringify(arr),
            agreement_id: this.agreement_id,
            ys_app_key: this.settingInfo.ys_app_key,
            ys_secret: this.settingInfo.ys_secret,
            mature_overtime: this.mature_overtime,
            storage_overtime: this.storage_overtime,
            free_preserve_time: this.free_preserve_time,
            mature_overtime_tips: this.mature_overtime_tips,
            storage_overtime_tips: this.storage_overtime_tips,
            free_preserve_time_tips: this.free_preserve_time_tips,
          }

          saveAdoptSetting(obj).then((res) => {
            if (!res.code) {
              console.log(res)
              this.$message.success('保存成功！')
            }
          })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.pay-checkbox {
  .pay-col {
    width: 100%;
    margin-bottom: 10px;
    /deep/.ant-checkbox-wrapper {
      display: flex;
      align-items: center;
    }
  }
  .pay-col:first-child {
    margin-top: 2px;
  }
  /deep/.ant-form-item-control-wrapper {
    width: 430px;
  }
  .label-self {
    width: 140px;
    text-align: right;
    padding-right: 20px;
  }
  .add-padding {
    width: 153px;
  }
}
</style>
